<template>
   <div class="box">
       <header class="head">
             <router-link tag="span" to="/Index" class="iconfont icon-zyojiantou"></router-link>
            <p>我的</p>
       </header>
       <section class="ming">
           <div class="left">
               <span class="iconfont icon-touxiang"></span>
           </div>
           <div class="cent">
               <h2>登录/注册</h2>
               <p><span class="iconfont icon-shouji"></span>登录后享受更多特权</p>
           </div>
           <div class="right">
             <span class="iconfont icon-youjian"></span>
           </div>
       </section>
       <figcaption class="jinbi">
          <dl>
            <dt class="iconfont icon-dingdan"></dt>
            <dd>红包</dd>    
          </dl>
          <dl>
            <dt class="iconfont icon-jinbi" id="_dt"></dt>
            <dd>金币</dd>    
          </dl>
       </figcaption> 
       <section class="heyi">
           <div class="neihe">
               <h1><span class="iconfont icon-weibiaoti104"></span>&nbsp;我的地址</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
        </section>
        <section class="heer">
           <div class="nehe">
               <h1><span class="iconfont icon-bao"></span>&nbsp;金币商城</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
           <div class="nehe">
               <h1><span class="iconfont icon-liwu" id="jin"></span>&nbsp;享受拿5元现金</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
        </section>
        <section class="hesan">
           <div class="nesn">
               <h1><span class="iconfont icon-erji"></span>&nbsp;我的客服</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
           <div class="nesn">
               <h1><span class="iconfont icon-eliaomo1"></span>&nbsp;下载饿了么APP</h1>
               <p class="iconfont icon-youjian"></p>
           </div>
        </section>      
   </div>
</template>
<script>
    
</script>
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
  .box{
      font-family: "微软雅黑";
      background: #eee;
      width: 100%;
      height: 100vh;
    .head{
        width: 100%;
        .px2rem(height,100);
        background: #0033FF;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        span{
            width: 13%;
            .px2rem(height,100);
            display: flex;
            justify-content: center;
            align-items: center;
            .px2rem(font-size,42);
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
        }
        p{
            width: 100%;
            .px2rem(height,100);
            .px2rem(font-size,36);
            color: #fff;
            font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        }
    }
    .ming{
        width: 100%;
        .px2rem(height,230);
        display: flex;
        background: #0033FF;
        .px2rem(padding-top,110);
        .left{
            width: 28%;
            .px2rem(height,230);
            display: flex;
            justify-content: center;
            align-items: center;
            span{
                .px2rem(font-size,180);
                color: #eee;
            }
        }
        .cent{
            width: 65%;
            .px2rem(height,230);
            display: flex;
            flex-direction: column;
            h2{
              .px2rem(font-size,45);
              font-weight: bold;
              color: #fff;
              .px2rem(padding-top,74);
            }
            p{  
              .px2rem(font-size,32);
               color: #fff; 
               line-height: 1.5; 
              span{
                .px2rem(font-size,40);
              }
            }
        }
        .right{
            width: 7%;
            .px2rem(height,230);
            display: flex;
            justify-content: center;
            align-items: center;
            span{
                .px2rem(font-size,38);
                color: #fff;
            }
        }
    }
    .jinbi{
        display: flex;
        background: #fff;
        dl{
            flex: 1;
            .px2rem(height,160);
            text-align: center;
            dt{
               .px2rem(font-size,60);
               color: #FF0000;
               .px2rem(padding-top,30);
               text-align: center;
            }
            dd{
              .px2rem(font-size,38);
              font-weight: bold;
              line-height: 1.8;
              color: Black;
            }
        }
        dl:first-child{
            border-right: 1px solid #555;
        }
        #_dt{
            color: #006600;
        }
    }
    .heyi{
        width: 100%;
        .px2rem(height,120);
        display: flex;
        justify-content: center;
        .px2rem(margin-top,20);
        background: #fff;
        .neihe{
            width: 92%;
            .px2rem(height,120);
            display: flex;
            justify-content: space-between;
            align-items: center;
            h1{
              .px2rem(font-size,36);
              font-weight: bold;
              color: Black;
              span{
                  .px2rem(font-size,42);
                  color: #0066FF;
              }
            }
            p{
              .px2rem(font-size,38);
               color: #ccc;  
            }
        }
    }
    .heer{
         width: 100%;
        .px2rem(height,200);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .px2rem(margin-top,20);
        background: #fff;
        .nehe{
            width: 92%;
            .px2rem(height,100);
            display: flex;
            justify-content: space-between;
            align-items: center;
            h1{
              .px2rem(font-size,36);
              font-weight: bold;
              color: Black;
              span{
                  .px2rem(font-size,42);
                  color: #339900;
              }
            }
            p{
              .px2rem(font-size,38);
               color: #ccc;  
            }
            #jin{
                color: 	#FF6600;
            }
        } 
    }
    .hesan{
        width: 100%;
        .px2rem(height,200);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .px2rem(margin-top,20);
        background: #fff;
        .nesn{
            width: 92%;
            .px2rem(height,100);
            display: flex;
            justify-content: space-between;
            align-items: center;
            h1{
              .px2rem(font-size,36);
              font-weight: bold;
              color: Black;
              span{
                  .px2rem(font-size,42);
                  color: #0066FF;
              }
            }
            p{
              .px2rem(font-size,38);
               color: #ccc;  
            }
         
        } 
    }
  }
</style>
